<template>
	<view class="page">
		<view class="topVue">
			<view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view class="flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="$tools.back()">
				<image src="../../static/back.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx; padding-left: 20rpx;">红包数量</text>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		
		<view class="box margin20">
			<view class="item flex-between align-center padding-row30">
				<view class="label">红包总数量</view>
				<view class="value">{{ redPacketSum }}</view>
			</view>
			<view class="item flex-between align-center padding-row30">
				<view class="label">红包已使用数量</view>
				<view class="value">{{ redPacketLost }}</view>
			</view>
			<view class="item flex-between align-center padding-row30">
				<view class="label">剩余红包数量</view>
				<view class="value">{{ redPacket }}</view>
			</view>
		</view>
		
		<view class="box margin20">
			<view class="title">红包来源明细</view>
			<view class="li padding30" v-for="(item, index) in list" :key="index">
				<view class="flex-between align-center" style="margin-bottom: 20rpx;">
					<view class="time">{{ item.createTime }}</view>
					<view class="value" :class="{active: item.status==1}">{{item.status==1 ? "+": "-"}}{{ item.num }}</view>
				</view>
				<text style="line-height: 1; color: #454545;">{{item.remark}}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				statusBarHeight: 0,
				barHeight: 0,
				list: [],
				redPacketSum: 0,
				redPacketLost: 0,
				redPacket: 0,
			}
		},
		onLoad() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
		},
		
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		
		async onShow() {
			await this.getRedPacketInfo()
		},
		
		methods: {
			async getRedPacketInfo(){
				const result = await this.$request("/api/WeChat/userRedPacket", {}, "GET")
				if(result.code===200) {
					console.log(result.data)
					this.redPacket = result.data.redPacket
					this.redPacketLost = result.data.redPacketLost
					this.redPacketSum = result.data.redPacketSum
					this.list = result.data.list
				}
			}
		}
		
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.safeVue {
			width: 100%;
		}
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.item {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.label {
				color: #454545;
				line-height: 1;
			}
			.value {
				color: #333;
				font-weight: 600;
				line-height: 1;
			}
		}
		.item:nth-last-child(1) {
			border-bottom: none;
		}
		.title {
			font-weight: 600;
			line-height: 1;
			padding: 30rpx 0 20rpx 30rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #333;
		}
		.li {
			width: 100%;
			border-bottom: 1rpx solid #f5f5f5;
			.label {
				color: #454545;
				line-height: 1;
			}
			.value {
				color: green;
				font-weight: 600;
				line-height: 1;
			}
			.active {
				color: red;
			}
		}
		.li:nth-last-child(1) {
			border-bottom: none;
		}
	}
</style>